import React from "react";
import {GithubCard} from "./GithubCard";
import {SimpleGrid, Title, Text, Stack, Center} from "@mantine/core";
import {GithubCardProps} from "./GithubCard";

const data: GithubCardProps[] = [
  {
    name: "React",
    src: "/GithubLogos/react.png",
    site: "https://zh-hans.react.dev/",
  },
  {
    name: "TypeScript",
    src: "/GithubLogos/typescript.png",
    site: "https://www.typescriptlang.org/",
  },
  {
    name: "Next.js",
    src: "/GithubLogos/nextjs.jpg",
    site: "https://nextjs.org/",
  },
  {
    name: "Mantine",
    src: "/GithubLogos/mantine.png",
    site: "https://mantine.dev/",
  },
  {
    name: "Tabler.io",
    src: "/GithubLogos/tablerio.png",
    site: "https://tabler.io/icons",
  },
  {
    name: "Mantine-Datatable",
    src: "/GithubLogos/mantineDatatable.png",
    site: "https://icflorescu.github.io/mantine-datatable/",
  },

  {
    name: "embla-carousel",
    src: "/GithubLogos/embla.svg",
    site: "https://www.embla-carousel.com/",
  },
  {
    name: "framer-motion",
    src: "/GithubLogos/framer.png",
    site: "https://motion.dev/",
  },
  {
    name: "Cytoscape",
    src: "/GithubLogos/cytoscape.png",
    site: "https://js.cytoscape.org/",
  },
  {
    name: "PostCSS",
    src: "/GithubLogos/postcss.svg",
    site: "https://postcss.org/",
  },
  {
    name: "Lottie",
    src: "/GithubLogos/lottie.png",
    site: "https://lottiefiles.com/",
  },
];

export default function Page() {
  return (
    <Stack>
      <Stack gap={1} ta="center">
        <Title order={2} pb="xs">
          技术栈
        </Title>
        <Text pb="md" c="dimmed">
          本平台基于以下开源技术实现，开源精神永存
        </Text>
      </Stack>

      <SimpleGrid cols={{base: 1, sm: 2, lg: 3, xl: 4}}>
        {data.map((item) => (
          <GithubCard key={item.name} name={item.name} src={item.src} site={item.site} />
        ))}
      </SimpleGrid>
    </Stack>
  );
}
